<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取图片路径</title>
</head>

<body>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


    <div id="app">


        <my-img mark="headers" @custom-change="add"></my-img>
        您输入的值是：{{obj.input.headers}}
        <div v-html="obj.input.headers"></div>
        <img :src="obj.input.headers" />
        <hr />
        <input type="file" id="fileSrc" accept="image/gif, image/jpeg, image/png, image/jpg" @change="getFile(e)" />
        您的图片地址是：{{fileImage}}
        <img :src="fileImage" />


    </div>

    <script>

        const App = Vue.createApp({
            setup() {
                const obj = Vue.reactive({
                    input: {
                        one: "222"
                    }
                });

                const count = Vue.ref("")
                const add = (a) => {

                    //接收传来的值，将值传入数组
                    obj.input[a.mark] = a.value

                }

                //图片地址
                let fileImage = Vue.ref("")
                const getFile = (e) => {

                    const fileObj = document.getElementById("fileSrc").files[0];
                    fileImage.value = URL.createObjectURL(fileObj);
                    console.log("您选中的文件名：", fileObj.name);
                    console.log("您的图片地址是：", URL.createObjectURL(fileObj))
                }


                return {
                    obj,
                    count,
                    add,
                    getFile,
                    fileImage
                }
            }
        })
        const inutvue = {
            /*
            *  mark:标记（必填）
            *  default：输入框的默认值
            */
            props: {
                mark: {
                    type: String,
                    required: true,
                },
                default: {
                    type: String,
                    default: "默认值"
                }
            },
            //提前声明要使用的自定义事件
            emits: ['customChange'],
            setup(props, { emit }) {

                const handleChange = (event) => {
                    let valueE = event.target.value

                    emit("customChange", { value: valueE, mark: props.mark })
                    //自定义触发事件，传出输入的值
                }


                return {

                    handleChange,


                };
            },

            template: `<input type="image"  placeholder ="可在此输入文字"  @input="handleChange" /><br />`,
        };
        App.component("my-img", inutvue);
        App.mount("#app");
    </script>

</body>

</html>